<template>
	<view class="mine">
		<view class="top">
			<view class="icon_box">
				<image @click="goset" src="../../static/tabsIcon/mine/set.png" mode=""></image>
				<!-- <image src="../../static/tabsIcon/talk.png" mode="" @click="msg()"></image> -->
			</view>
			<view class="title_mine">
				我的
			</view>
			<view class="icon_box">
				<!-- <image @click="shoppingCart" src="../../static/tabsIcon/order.png" mode=""></image> -->
				<image @click="gomessage" src="../../static/tabsIcon/mine/message.png" mode=""></image>
			</view>
		</view>
		<view class="head">
			<view class="hlogo">
				<view class="himg">
					<image class="hp" :src="mine.imageUrl" mode=""></image>
					<image @click="goeditheader" class="xiugai" src="../../static/tabsIcon/xiugai.png" mode=""></image>
				</view>
				<view class="name_box">
					<view class="name_vip">
						<view class="name">
							{{mine.name}}
						</view>
						<image v-if="mine.isVip==1" class="vvvip" src="../../static/tabsIcon/mine/viplogo.png" mode="">
						</image>
						<image v-if="mine.clubLeader == 1" style="height: 40upx;" src="../../static/dianzhang.png"
							mode="heightFix">
						</image>
						<image v-if="mine.isVip!=1 && mine.clubLeader != 1" style="height: 40upx;"
							src="../../static/generalUser.png" mode="heightFix">
						</image>
					</view>

					<view class="id_box">
						ID：{{mine.id}}
					</view>
					<view v-if="mine.isVip==1" class="vip_time">
						VIP到期时间：{{mine.expirationTime | times}}
					</view>
				</view>
			</view>
			<view class="qiandao">
				<view v-if="mine.isSign==0" @click="sign" class="qian">
					<image src="../../static/tabsIcon/mine/qd.png" mode=""></image>
					看广告签到
				</view>
				<view v-else class="qian">
					已签到
				</view>
			</view>
		</view>
		<view class="message">
			<view @click="gointer()" class="mess_item">
				<view class="mess_title">
					我的牛果
				</view>
				<view class="mess_num">
					{{mine.integral}}
				</view>
			</view>
			<view @click="gobalance()" class="mess_item">
				<view class="mess_title">
					我的余额
				</view>
				<view class="mess_num">
					{{mine.balance}}
				</view>
			</view>
			<view class="mess_item" @click="gocust()">
				<view class="mess_title">
					我的客户
				</view>
				<view class="mess_num">
					{{mine.customerNum}}
				</view>
			</view>
		</view>
		<view class="order_list">
			<view class="title">
				<view class="left">
					我的订单
				</view>
				<view @click="goOrderList(0)" class="right">
					全部 <u-icon name="arrow-right" color="#666666" size="13"></u-icon>
				</view>
			</view>
			<view class="list_box">
				<view @click="goOrderList(4)" class="order_item">
					<image src="../../static/tabsIcon/mine/dai.png" mode=""></image>
					<view class="order_name">
						待付款
					</view>
				</view>
				<view @click="goOrderList(2)" class="order_item">
					<image src="../../static/tabsIcon/mine/daifa.png" mode=""></image>
					<view class="order_name">
						待收货
					</view>
				</view>
				<view @click="goOrderList(3)" class="order_item">
					<image src="../../static/tabsIcon/mine/wc.png" mode=""></image>
					<view class="order_name">
						已完成
					</view>
				</view>
				<view @click="goOrderList(1)" class="order_item">
					<image src="../../static/tabsIcon/mine/daishou.png" mode=""></image>
					<view class="order_name">
						已结算
					</view>
				</view>
				<view class="order_item" @click="ke()">
					<image src="../../static/tabsIcon/mine/kefu.png" mode=""></image>
					<view class="order_name">
						客服
					</view>
				</view>
			</view>
		</view>
		<view class="vip_box">
			<image src="../../static/tabsIcon/viplogo2.png" mode=""></image>
			<!-- 	<view v-if="mine.isVip==1" class="ms">
				{{mine.expirationTime | times}}到期
			</view> -->
			<view class="ms">
				加入VIP有好礼
			</view>
			<view v-if="mine.isVip==1" @click="govip()" class="btn">
				立即续费
			</view>
			<view v-else @click="govip()" class="btn">
				立即开通
			</view>
		</view>
		<view class="other_list">
			<!-- 	<view @click="shoppingCart" class="other_item">
				<view class="item_left">
					<image src="../../static/tabsIcon/mine/car.png" mode=""></image>
					<view class="left_name">
						购物车
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#666666" size="13"></u-icon>
				</view>
			</view> -->
			<view @click="gotask()" class="other_item">
				<view class="item_left">
					<image src="../../static/tabsIcon/mine/renwu.png" mode=""></image>
					<view class="left_name">
						任务管理
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#666666" size="13"></u-icon>
				</view>
			</view>
			<view @click="release" class="other_item">
				<view class="item_left">
					<image src="../../static/tabsIcon/mine/fabu.png" mode=""></image>
					<view class="left_name">
						我的发布
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#666666" size="13"></u-icon>
				</view>
			</view>
			<view @click="gopro" class="other_item">
				<view class="item_left">
					<image src="../../static/tabsIcon/mine/shouyi.png" mode=""></image>
					<view class="left_name">
						我的收益
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#666666" size="13"></u-icon>
				</view>
			</view>
			<view @click="goyj" class="other_item">
				<view class="item_left">
					<image src="../../static/tabsIcon/mine/yj.png" mode=""></image>
					<view class="left_name">
						我的佣金
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#666666" size="13"></u-icon>
				</view>
			</view>
			<view @click="gocust()" class="other_item">
				<view class="item_left">
					<image src="../../static/tabsIcon/mine/kehu.png" mode=""></image>
					<view class="left_name">
						我的团队
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#666666" size="13"></u-icon>
				</view>
			</view>
			<view @click="gomengyou()" class="other_item">
				<view class="item_left">
					<image src="../../static/tabsIcon/mine/partner.png" mode=""></image>
					<view class="left_name">
						我的盟友
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#666666" size="13"></u-icon>
				</view>
			</view>
			<view @click="goreal()" class="other_item">
				<view class="item_left">
					<image src="../../static/tabsIcon/mine/shiming.png" mode=""></image>
					<view class="left_name">
						实名认证
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#666666" size="13"></u-icon>
				</view>
			</view>
			<view @click="gocoll" class="other_item">
				<view class="item_left">
					<image src="../../static/tabsIcon/coll1.png" mode=""></image>
					<view class="left_name">
						我的收藏
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#666666" size="13"></u-icon>
				</view>
			</view>
			<view @click="goaddress" class="other_item">
				<view class="item_left">
					<image src="../../static/tabsIcon/mine/dizhi.png" mode=""></image>
					<view class="left_name">
						地址管理
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#666666" size="13"></u-icon>
				</view>
			</view>
			<view v-if="mode" @click="modeType = true" class="other_item" style="border: none;">
				<view class="item_left">
					<image src="../../static/tabsIcon/mine/superior.png" mode=""></image>
					<view class="left_name">
						绑定上级
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#666666" size="13"></u-icon>
				</view>
			</view>
			<view class="big_btn" @click="feedback()">
				问题反馈
			</view>
		</view>

		<u-modal @confirm="confirm" @cancel="modeType = false" :showCancelButton="true" :show="modeType"
			title="输入邀请码绑定关系链">
			<view class="slot-content">
				<u--input placeholder="请输入邀请码" border="surround" v-model="inputvalue"></u--input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getinfo,
		sign,
		changerelation
	} from '@/api/mine'
	import {
		bootbannergetBannerList
	} from '@/api/home'
	import AD from '@/util/ad'
	export default {
		data() {
			return {
				LinkType: 'switchTab',
				mine: [],
				img: "",
				num: 0,
				modeType: false,
				inputvalue: '',
				mode: false
			}
		},
		filters: {
			times(value) {
				let date = new Date(value);
				let y = date.getFullYear(); // 年
				let MM = date.getMonth() + 1; // 月
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate(); // 日
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours(); // 时
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes(); // 分
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds(); // 秒
				s = s < 10 ? ('0' + s) : s;
				// var timer =  y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				var timer = y + '-' + MM + '-' + d;
				return timer;
			}
		},
		onReady() {
			AD.load({
				adpid: 1677810062, // 测试1507000689，上线前换正式id
				adType: "RewardedVideo"
			});
		},
		onShow() {
			this.getinfo();
			// this.getimg();
		},
		methods: {
			confirm() {
				// console.log(this.inputvalue)
				if (!this.inputvalue) {
					return
				}
				uni.showLoading({
					mask: true
				});
				changerelation(this.inputvalue).then(res => {
					if (res.success == 1) {
						this.modeType = false
						this.mode = false
					}
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					});
				}).finally(() => {
					console.log(res)
					uni.hideLoading();
				})
			},
			gopro() {
				uni.navigateTo({
					url: './profit'
				})
			},
			shoppingCart() {
				uni.navigateTo({
					url: "/pages/index/shoppingCart/shoppingCart",
				});
			},
			gocoll() {
				uni.navigateTo({
					url:'/pages/index/collList/collList'
				})
			},
			msg() {
				uni.navigateTo({
					url: "/pages/club/customer",
				});
			},
			gomengyou() {
				uni.navigateTo({
					url: './mengyou'
				})
			},
			getimg() {
				bootbannergetBannerList(11).then(res => {
					// console.log(res)
					this.img = res.data[0].picturesLinking;
				})
			},
			repeatAd() {
				return new Promise((a, b) => {
					let this_ = this;

					function repeatAdFun() {
						AD.show({
							adpid: 1677810062, // 测试1507000689，上线前换正式id
							adType: "RewardedVideo"
						}, (res) => {
							// 用户点击了【关闭广告】按钮
							if (res && res.isEnded) {
								// 正常播放结束
								if (this_.num >= 0) {
									// console.log(this_.num)
									a(this_.num)
								} else {
									// console.log(this_.num)
									this_.num++
									repeatAdFun()
								}
							} else {
								b(res)
								// 播放中途退出
								console.log("onClose " + res.isEnded);
							}
						}, (err) => {
							// 广告无法显示，输出错误信息，可以采集数据上报以便分析
							b(err)
							console.log(err)
							uni.showToast({
								icon: 'none',
								title: JSON.stringify(err)
							})
						})
					}
					repeatAdFun()
				});
			},
			sign() {
				this.num = 0;
				this.repeatAd().then(res => {
					sign().then(res => {
						if (res.success == 1) {
							uni.showToast({
								icon: 'none',
								title: '签到成功!'
							})
							// setTimeout(() => {
							this.getinfo();
							// }, 0)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
				})
			},
			getinfo() {
				getinfo().then(res => {
						if (res.success == 1) {
							if (res.data.isChange == 0) {
								this.mode = false
							} else {
								this.mode = true
							}
							this.mine = res.data;
							this.$forceUpdate()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
					.catch(err => {

					});
			},
			gotask() {
				uni.navigateTo({
					url: "./task"
				})
			},
			goreal() {
				if (this.mine.isAuth == 0) {
					uni.navigateTo({
						url: './realname?type=1'
					})
				} else {
					uni.navigateTo({
						url: './realnameedit?type=1'
					})
				}

			},
			goyj() {
				uni.navigateTo({
					url: "./commission"
				})
			},
			gocust() {
				uni.navigateTo({
					url: "./customer"
				})
			},
			gointer() {
				uni.navigateTo({
					url: "./integral"
				})
			},
			goset() {
				uni.navigateTo({
					url: "./setlist"
				})
			},
			goeditheader() {
				uni.navigateTo({
					url: "./user"
				})
			},
			gowithdral() {
				uni.navigateTo({
					url: "./Withdrawal"
				})
			},
			goaddress() {
				uni.navigateTo({
					url: './AddressManagement'
				})
			},
			gomessage() {
				uni.navigateTo({
					url: "./message/message"
				})
			},
			govip() {
				uni.navigateTo({
					url: './vip'
				})
			},
			gobalance() {
				uni.navigateTo({
					url: "./balanceList"
				})
			},
			goOrderList(i) {
				// uni.navigateTo({
				// 	url: "./OrderList?act=" + i
				// })
				if (i == 0) {
					uni.navigateTo({
						url: "./OrderList"
					})
				} else if (i == 1) {
					uni.navigateTo({
						url: "./OrderList4"
					})
				} else if (i == 2) {
					uni.navigateTo({
						url: "./OrderList2"
					})
				} else if (i == 3) {
					uni.navigateTo({
						url: "./OrderList3"
					})
				} else if (i == 4) {
					uni.navigateTo({
						url: "./OrderList5"
					})
				}

			},
			release() {
				// uni.navigateTo({
				// 	url: '/pages/community/release',
				// });
				uni.navigateTo({
					url: './files/files',
				});
			},
			feedback() {
				uni.navigateTo({
					url: './feedback/feedback',
				});
			},
			ke() {
				uni.navigateTo({
					url: "/pages/club/customer",
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
	}

	.mine {
		// background: #e7e9ec;
		background-image: url(../../static/tabsIcon/mybg2.png);
		background-repeat: no-repeat;
		background-size: 100% calc(400rpx + var(--status-bar-height));
		// min-height: 80vh;
		padding: 30rpx 30rpx 0;
		padding-top: calc(30rpx + var(--status-bar-height))
	}

	.top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.icon_box {

			image {
				width: 45rpx;
				height: 45rpx;
				margin: 0 15rpx;
			}
		}
	}

	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;

		.hlogo {
			display: flex;
			// justify-content: space-between;
			// flex-direction: column;
			align-items: center;

			.himg {
				position: relative;
				margin-right: 30rpx;

				// margin-bottom: 5rpx;
				.hp {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.xiugai {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					bottom: 10rpx;
					right: -8rpx;
				}
			}

			.name_box {
				text-align: left;

				.name_vip {
					display: flex;
					align-items: center;
				}

				.name {
					color: #333333;
					max-width: 320rpx;
					text-align: left;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-right: 10rpx;
				}

				.vvvip {
					width: 35rpx;
					height: 25rpx;
				}

				.id_box {
					color: #999999;
					font-size: 24rpx;
					max-width: 360rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.vip_time {
					font-size: 24rpx;
					color: #e7c08a;
				}
			}

		}

		.qiandao {
			color: #FC6758;
			border: 1rpx solid #FC6758;
			border-radius: 20rpx;
			padding: 5rpx;
			width: 215rpx;
			text-align: center;
			font-size: 28rpx;

			.qian {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}

	.message {
		display: flex;
		padding: 40rpx 0;
		margin: 60rpx 0 20rpx 0;
		align-items: center;
		justify-content: space-around;
		border-radius: 20rpx;
		background: linear-gradient(270deg, #FF6A48 0%, #F75847 44%, #ED4046 100%);
		color: #fff;

		.mess_item {
			text-align: center;

			.mess_title {
				font-size: 26rpx;
				margin-bottom: 20rpx;
			}

			.mess_num {
				font-size: 36rpx;
				font-weight: bold;
			}
		}
	}

	.order_list {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx 10rpx;

		.title {
			padding-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #666666;
			font-size: 30rpx;

			.right {
				font-size: 24rpx;
				display: flex;
				align-items: center;
			}
		}

		.list_box {
			padding: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.order_item {
				text-align: center;

				image {
					width: 60rpx;
					height: 50rpx;
					margin: 0;
					padding: 0;
					// margin-bottom: 10rpx;
				}

				.order_name {
					color: #333333;
					font-size: 26rpx;
				}
			}
		}
	}

	.vip_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		margin: 20rpx 0 30rpx;
		background: url(../../static/tabsIcon/mine/vipbg.png) no-repeat;
		background-size: 100% 100%;

		image {
			width: 44rpx;
			height: 38rpx;
		}

		.ms {
			color: #6A4714;
			font-size: 34rpx;
			font-weight: bold;
		}

		.btn {
			width: 150rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 24rpx;
			background: linear-gradient(270deg, #855716 10%, #4A2E04 100%);
			border-radius: 20rpx;
		}
	}

	.other_list {
		background: #FFFFFF;
		padding: 0 20rpx;
		margin-bottom: 40rpx;
		border-radius: 20rpx;
		padding-bottom: 20upx;

		.other_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			color: #333333;
			font-size: 30rpx;
			border-bottom: 2rpx solid #F0F1F6;

			.item_left {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.big_btn {
		width: 100%;
		height: 80rpx;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
		background: #F95C47;
		border-radius: 40rpx;
		margin: 10rpx 0;
		font-size: 36rpx;
	}
</style>
